<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data必须是函数</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>

    <div id="app_data">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>


    </div>

    <script>
//        var data = { counter: 0 };
        Vue.component('simple-counter',{
            template:'<button v-on:click="counter+=1">{{counter}}</button>',
            // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
            // 但是我们返回给每个组件的实例的却引用了同一个data对象
            data: function () {
//              return data
//              我们可以通过为每个组件返回全新的 data 对象来解决这个问题
                return {
                    counter:0
                }
            }
        })
        var app_data = new Vue({
            el:'#app_data',

        })

    </script>



</body>
</html>